<template>
  <el-dialog
    :close-on-click-modal="false"
    width="45%"
    :title="title"
    :visible.sync="visible"
    :before-close="cancel"
    lock-scroll
    append-to-body
  >
    <el-form
      class="edit-form"
      status-icon
      :model="datas"
      :rules="rule"
      @keyup.enter.native="save"
      ref="editForm"
    >
      <el-row :gutter="10">
        <el-col :span="23">
          <el-form-item prop="name" label="类别名称" :label-width="baseStyle.width">
            <!-- <el-input v-if="" v-model="datas.name" :readonly="false" autocomplete="off"></el-input> -->
            <el-select :disabled="!isAdd" v-model="datas.id" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.status===0?true:false"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item prop="status" label="是否禁用" :label-width="baseStyle.width">
            <el-radio v-model="datas.status" :label="1">启用</el-radio>
            <el-radio v-model="datas.status" :label="0">禁用</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item prop="disposeList" label="配置项" :label-width="baseStyle.width">
            <div>
              <el-button size="small" type="primary" @click="disposeHandle(disposeLists)">选择</el-button>
            </div>
            <draggable tag="ul" v-model="disposeLists">
              <li v-for="item in disposeLists" :key="item.id">{{item.name}}</li>
            </draggable>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button :type="'primary'" :loading="loading" @click.native="save()">保存</el-button>
    </div>
    <InnerEditForm ref="innerEditForm" @innerSave="innerSave" :baseStyle="baseStyle" />
  </el-dialog>
</template>

<script>
import classicAPI from "@apis/projectClassic";
import draggable from "vuedraggable";
import { Message } from "element-ui";
import InnerEditForm from "./innerForm";

export default {
  name: "DisposeForm",
  props: {
    visible: Boolean,
    baseStyle: Object,
    title: String,
    isAdd: Boolean,
    saveForm: Function,
    usedClass: String
  },
  data() {
    const rule = this.getRules();
    return {
      loading:false,
      rule,
      datas: {},
      disposeLists: [],
      classList: [],
      saveList: [], //修改阶段后的disposeLists，带flage字段的
      openInner: false
    };
  },
  components: {
    InnerEditForm,
    draggable
  },
  computed: {},
  created() {},
  methods: {
    getStageList(data) {
      classicAPI
        .getList(data)
        .then(res => {
          this.classList = [...res.list];
        })
        .catch(err => this.$message.error(err.message));
    },
    cancel() {
      this.loading = false;
      this.$emit("update:visible", false);
      this.$refs.editForm.resetFields();
      this.datas = {};
      this.disposeLists = [];
    },
    save() {
      if (this.disposeLists.length <= 0) {
        this.$message.error("请先选择配置项");
        return;
      }
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let disData = [];
          this.disposeLists.forEach(item => {
            if (this.openInner) {
              if (this.saveList.indexOf(item.id) > -1) {
                disData.push({ id: item.id, flage: 1, sort: item.sort });
              } else {
                disData.push({ id: item.id, flage: 0, sort: item.sort });
              }
            } else {
              disData.push({ id: item.id, flage: item.flage, sort: item.sort });
            }
          });
          // console.log(disData,"disData");
          // return
          this.loading = true;
          this.$emit("saveForm", {
            ...this.datas,
            disposeList: disData
          });
          // this.cancel();
        } else {
          return false;
        }
      });
    },
    setData(val, usedClass, isAdd) {
      isAdd ? this.getStageList(this.usedClass) : this.getStageList();
      this.datas = { ...val };
      this.saveList = [];
      this.openInner = false;
      this.disposeLists = val.disposeList ? [...val.disposeList] : [];
    },

    innerSave(val) {
      this.disposeLists = [...val];
      console.log(val, "innerSave");
    },
    disposeHandle(val) {
      if (!this.datas.id) {
        this.$message.warning("请先选择类别");
        return;
      }
      this.openInner = true;
      let newArr = [];
      val.map(item => {
        if (item.flage == 1) {
          this.saveList.push(item.id);
        }
        newArr.push(item.name);
      });
      this.$refs.innerEditForm.openAddThings();
      this.$refs.innerEditForm.setCheckData(newArr || [], this.datas.id);
    },
    getRules() {
      return {
        id: [
          {
            // required: true,
            validator: (rule, value, callback) => {
              if (!this.datas.id) {
                callback(new Error(`请填写类别名称`));
                return;
              }
              callback();
            },
            trigger: "blur"
          }
        ]
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.edit-form {
  height: 42vh;
  overflow-y: auto;
  overflow-x: hidden;
  li {
    cursor: pointer;
  }
}
</style>